<template>
  <!-- 收入统计 => 公司 -->
  <div class="pages prepaid">
    <div class="pageLevel" v-if="!sub">
      <!-- 头部 -->
      <!-- 搜索框 -->
      <div class="total-income">
        <div class="all-income">
          预付款金额：
          <span>{{prepayments}}</span>元
        </div>
      </div>
      <div class="tableSearch">
        <el-form label-width="150px" class="demo-ruleForm" size="small">
          <el-form-item label="供应商（收款方）:" style="margin-left:10px">
            <el-select v-model="selectdata.selects" size="small">
              <el-option v-for="item in options" :key="item.payeeId" :label="item.payeeName" :value="item.payeeId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
            <el-button type="primary" @click="toPage" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="75" align="center"></el-table-column>

          <el-table-column prop="payeeName" label="供应商（收款方）" align="center">
          </el-table-column>
          <el-table-column prop="price" label="预付款余额" align="center">
          </el-table-column>
          <el-table-column label="操作" width="240" align="center">
            <template slot-scope="scope">
              <el-button size="small" v-if="setRole('交易明细  ')" @click="routerPush('/financial-center/collect-advance/finance-prepaid/finance-transactionPay',scope.row.payerId,scope.row.payeeId)" type="text" class="addDetail">交易明细</el-button>
              <el-button size="small" :disabled="scope.row.status==0" v-if="setRole('充值')" @click="recharges(scope.row.payerId,scope.row.payeeId,scope.row.price)" type="text" class="addDetail">充值</el-button>
              <el-button size="small" v-if="setRole('申请退款')" @click="refunds(scope.row.payerId,scope.row.payeeId,scope.row.price)" type="text" class="addDetail">申请退款</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <el-dialog class="addshopname" title="充值" :visible.sync="dialogFormVisible" width="610px">
        <el-form :model="form" center>
          <el-form-item label="可用金额为" :label-width="formLabelWidth">
            <span>{{gold}} 元</span>
          </el-form-item>
          <el-form-item label="充值金额" :label-width="formLabelWidth">
            <sd-input :val.sync='form.money' placeholder="请输入充值金额" style="width:120px;float:left; "></sd-input>
            <span class="box">最大可充值金额为可用金额</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" center>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="rechargeSure">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog class="addshopname" title="提现退款" :visible.sync="dialogFormVisiblety" width="610px">
        <el-form :model="form" center>
          <el-form-item label="预付款余额" :label-width="formLabelWidth">
            <span>{{gold}}元</span>
          </el-form-item>
          <el-form-item label="申请退款金额:" :label-width="formLabelWidth">
            <sd-input :val.sync='form.money' placeholder="请输入退款金额" style="width:120px;float:left; "></sd-input>
            <span class="box">最大可退款金额为预付款余额</span>
          </el-form-item>
          <div class="box">温馨提示：收款方审核通过后会将金额打入至您的中金账户</div>
        </el-form>
        <div slot="footer" class="dialog-footer" center>
          <el-button @click="dialogFormVisiblety = false">取 消</el-button>
          <el-button type="primary" @click="refundSure">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import {
  findPayBillListReport,
  accountPageList,
  recharge,
  preAccountList,
  amountInquiry,
  applyReturn
} from "@/api";
import util from "@/util";
import { mapState } from "vuex";
import sdInput from "@/components/SdInput";
export default {
  components: { sdInput },
  computed: mapState(["merchantId", "sub", "power"]),
  data() {
    return {
      form: {
        money: ""
      },
      prepayments: "",
      availableBalance: "",
      gold: "999.99",
      payerId: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogFormVisiblety: false,
      status: "",
      name: "",
      pageSize: 10,
      total: 0,
      currentPage: 1,
      selectdata: {
        selects: ""
      },
      tableData: [],
      options: [],
      sum: ""
    };
  },
  mounted() {
    this.getdata(10, 1);
    this.preAccountList();
    this.amountInquiry();
  },
  methods: {
    //下拉
    preAccountList() {
      let postdata = {
        payerId: this.merchantId
      };
      preAccountList(postdata).then(res => {
        let a = {
          payeeName: "全部",
          payeeId: ""
        };
        res.data.unshift(a);
        this.options = res.data;
      });
    },
    amountInquiry() {
      let postdata = {
        payeeId: this.merchantId
      };
      amountInquiry(postdata).then(res => {
        this.prepayments = res.data.prepayments;
        this.availableBalance = res.data.availableBalance;
      });
    },

    rechargeSure() {
      if (this.form.money == "") {
        this.$message({
          showClose: true,
          message: "请输入充值金额！",
          type: "info"
        });
        return false;
      }
      if (this.form.money == 0) {
        this.$message({
          showClose: true,
          message: "充值金额应大于0！",
          type: "info"
        });
        return false;
      }
      this.rechargeGet();
    },
    refundSure() {
      if (this.form.money == "") {
        this.$message({
          showClose: true,
          message: "请输入退款金额！",
          type: "info"
        });
        return false;
      }
      if (this.form.money == 0) {
        this.$message({
          showClose: true,
          message: "退款金额应大于0！",
          type: "info"
        });
        return false;
      }
      this.applyReturn();
    },
    recharges(payerId, payeeId, gold) {
      this.dialogFormVisible = true;
      this.payerId = payerId;
      this.payeeId = payeeId;
      this.gold = this.availableBalance;
    },
    refunds(payerId, payeeId, gold) {
      this.dialogFormVisiblety = true;
      this.payerId = payerId;
      this.payeeId = payeeId;

      this.gold = gold;
    },
    //配置权限
    setRole(key) {
      //console.log(this.power);
      return util.selectTitle(this.power, key);
    },
    //跳页
    toPage() {
      this.getdata(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdata(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(this.pageSize, val);
    },
    routerPush(name, payerId, payeeId) {
      util.routerTo(name, {
        payerId: payerId,
        payeeId: payeeId
      });
    },
    //充值
    rechargeGet() {
      let postdata = {
        payeeId: this.payeeId,
        payerId: this.payerId,
        operPrice: this.form.money
      };
      recharge(postdata).then(res => {
        if (res.code == 200) {
          this.dialogFormVisible = false;
          this.getdata(this.pageSize, this.currentPage);
          this.amountInquiry();
          this.form.money = "";
          this.$message({
            message: "充值成功",
            type: "success"
          });
        }
      });
    },
    //申请退款
    applyReturn() {
      let postdata = {
        userId: this.payeeId,
        applyUserId: this.payerId,
        returnPrice: this.form.money
      };
      applyReturn(postdata).then(res => {
        if (res.code == 200) {
          this.form.money = "";
          this.dialogFormVisiblety = false;
          this.getdata(this.pageSize, this.currentPage);
          this.amountInquiry();
          this.$message({
            message: "申请退款成功",
            type: "success"
          });
        }
      });
    },
    getdata(pageSize, pageNum) {
      let postdata = {
        payeeId: this.selectdata.selects,
        payerId: this.merchantId,
        pageNo: pageNum,
        pageSize: pageSize
      };
      accountPageList(postdata).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.status = res.data.status;
        this.name = res.data.name;
      });
    }
  }
};
</script>
<style>
.prepaid .box {
  color: #c0c4cc;
  margin-left: 26px;
  font-size: 12px;
}
.prepaid .el-input__inner {
  height: 32px;
  line-height: 32px;
}
#app {
  text-align: inherit;
}
.prepaid .total-income {
  color: #606266;
  width: 100%;
  line-height: 55px;
  margin: 20px 0px 10px 0px;
  border-bottom: 1px solid #eee;
}
.prepaid .total-income .all-income {
  margin-left: 30px;
}
.prepaid .total-income .all-income span {
  margin-left: 10px;
}
.prepaid .tableSearch .el-select {
  width: 140px;
}
.prepaid .span1 {
  color: red;
  margin-left: 100px;
  font-size: 14px;
  font-weight: bold;
}
</style>
